<template>
  <div style="margin-top: 55px;display: flex; gap: 10px; justify-content: center;">
    <router-link :to="{path: '/tally', query: {month}}">
      <el-button>统计账单</el-button>
    </router-link>
    <router-link :to="{path: '/trip'}">
      <el-button>旅行费用</el-button>
    </router-link>
    <router-link to='/record'>
      <el-button>记账</el-button>
    </router-link>
  </div>
  <el-table :data="tally" table-layout="auto">
    <el-table-column prop="time" label="使用时间" width="180" align="right"/>
    <el-table-column prop="amount" label="金额" width="180 " align="right">
      <template v-slot="scope">
        {{ scope.row.amount.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column prop="category" label="类别" width="180" align="right"/>
    <el-table-column prop="purpose" label="用处" width="180" align="right"/>
  </el-table>

</template>


<script setup>
import {inject, onMounted, ref} from "vue"
import axios from 'axios';
import {format} from 'date-fns';

const month = ref(format(new Date(), 'yyyy-MM'))
const GLOBAL_CONSTANT = inject('GLOBAL_CONSTANT');

onMounted(() => {
  axios.get(GLOBAL_CONSTANT + 'wolf/tally/bill_detail/')
      .then((res) => {
        if (res.data.code === 610) {
          tally.value = res.data.data;
        }
      })
})

const tally = ref([])
</script>

<style scoped>

</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
